<template>
    
    <!-- 组件的模板 -->
    <div class="page form-report">
        <ul class="form-select">
            <li class="com-border-bottom margin_left_12" v-for="temp in tempList">                
                <h2>{{temp.title}}</h2>
                <a class="mod-btn-s-3" href="javascript:;" @click="gotoFormTempPreview(temp)">预览</a>
                <a class="mod-btn-s-3" href="javascript:;" @click="gotoEditForm(temp)">使用</a>                
            </li>
        </ul>
    </div>




    <!-- <div class="weui-cells">
        <div class="weui-cell" v-for="temp in tempList">
            <div class="weui-cell__bd">
                <p class="formname">{{temp.title}}</p>
            </div>
            <div class="weui-cell__ft">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default ver-ali-mid btn" @click="gotoFormTempPreview">预览</a>
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default ver-ali-mid btn" @click="gotoEditForm(temp.form_id)">选择</a>
            </div>
        </div>
    </div> -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    // import widget from 'gapi/widget.js'
    import commonPage from 'clientApi/commonPage.js'
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget.js'
    import * as util from 'js/util.js'
    import KCApiApp from 'clientApi/KCApiApp.js'

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                tempList: [
                    // {
                    //     "templet_id": 1,
                    //     "title": "销量上报",
                    //     "desc": "销量上报",
                    //     "format_info": [
                    //         {
                    //             "id": "",
                    //             "type": "SingleText",
                    //             "name": "单行文字",
                    //             "order": 1,
                    //             "info": {
                    //                 "title": "请输入标题",
                    //                 "value": "",
                    //                 "tip": "请输入提示语",
                    //                 "required": 0
                    //             }
                    //         }
                    //     ]
                    // }
                ],
                user_info: {}
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                commonPage.updateTitleBar({
                    //backAction: 'checkChange',    // 点击返回按钮的动作（即回调函数名称）
                    // leftDisplay: false,            // 是否显示左按钮
                    // leftText: '',                // 左按钮文案
                    //leftAction: 'checkChange',    // 点击左按钮的动作（即回调函数名称）
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '自定义表单',            // 右按钮文案
                    rightAction: 'saveResume'    // 点击右按钮的文案（即回调函数名称）
                })
                window.saveResume = () => {
                    //埋点
                    let statisticsLog_data = {
                        event_id: '选择表单模板-自定义表单',
                        // event_label: data.event_label,(预留，现在不用传此参数)
                        event_param: {
                            ca_from: 'userdefined',
                            project_id: this.user_info.project_id,
                        }
                    }
                    // alert(JSON.stringify(statisticsLog_data))
                    KCApiApp.statisticsLog(statisticsLog_data)
                    // let encodeStr = encodeURIComponent(`prevPageName=selectFormTemp`)
                    // location.href = `dmsaas://EditForm?urdData=${encodeStr}`
                    location.href = `dmsaas://EditForm`
                }
                
                cache.getCache('user_info', (data) => {
                    this.user_info = data
                    util.ajax({
                        url: '/form/templet',
                        type: 'GET',
                        data: {
                            team_id: data.team_id,
                            project_id: data.project_id
                        },
                        timeout: 10000,
                        success: (data) => {
                            // success
                            // alert(JSON.stringify(data))
                            if(data.errno == 0){
                                this.tempList = data.data
                            }else{
                                // widget.toast('服务器异常')
                                widget.toast(data.errmsg)
                            }

                        },
                        error: (xhr, status) => {
                            // error
                            widget.toast('服务器异常')
                        },
                        noNetwork: () => {
                            // 无网络的回调
                            widget.toast('网络连接失败，请检查网络')
                        }
                    })
                })

                //缓存webview id，用于 goBack 指定跳转
                // if(util.OS()=='ios'){
                //     commonPage.getWebViewID((id)=>{
                //         cache.setCache('webViewID', id)
                //     })
                // }
            },
            gotoFormTempPreview (temp){
                //埋点
                let statisticsLog_data = {
                    event_id: '选择表单模板-预览',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'preview',
                        project_id: this.user_info.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                let temp_info = JSON.stringify(temp)
                let encodeStr = encodeURIComponent(`temp_info=${temp_info}&&isShowUse=${1}`)
                location.href = `dmsaas://FormTempPreview?urdData=${encodeStr}`
            },
            gotoEditForm (temp){
                //埋点
                let statisticsLog_data = {
                    event_id: '选择表单模板-使用',
                    // event_label: data.event_label,(预留，现在不用传此参数)
                    event_param: {
                        ca_from: 'choose',
                        project_id: this.user_info.project_id,
                    }
                }
                // alert(JSON.stringify(statisticsLog_data))
                KCApiApp.statisticsLog(statisticsLog_data)
                let temp_info = JSON.stringify(temp)
                let encodeStr = encodeURIComponent(`temp_info=${temp_info}`)
                location.href = `dmsaas://EditForm?urdData=${encodeStr}`
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/form-report.css"></style>
<style type="text/css">
    /*body{
        background: #f8f8f8;
    }
    div.weui-cells{
        margin-top:0px;
    }
    .formname{
        font-size: 16px;
    }
    .weui-btn.weui-btn_mini{
        background: #fff;
    }
    .weui-btn.weui-btn_mini + .weui-btn.weui-btn_mini{
        margin-top:0px;
    }
    a.btn{
        border:1px solid rgb(255, 170, 0);
        color:rgb(255, 170, 0);
        width:60px;
        height:30px;
        line-height: 30px;
        text-align: center;
        padding:0;
    }*/
    /*ul.form-select li.margin_left_12{
        padding:9px 12px;
    }*/
    ul.form-select li.margin_left_12:after{
        left:12px;
    }
    ul.form-select li.margin_left_12:last-child:after{
        left:0px;
    }
</style>


